<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="...">
            </a>

        </div>
        <p class="navbar-text navbar-right"><span class="glyphicon glyphicon-user"></span> Ta Nghia
            <a href="#" class="navbar-link"><span class="glyphicon glyphicon-log-out"></span> Logout </a></p>
    </div>
</nav>
<div class="container-fluid">
    <div class="col-lg-2 co-md-2">
        <ul class="nav nav-pills nav-stacked">
            <li role="presentation"><a href="dashboard.html"><span class="glyphicon glyphicon-home"
                                                                   aria-hidden="true"></span> Dashboard</a></li>
            <li role="presentation"><a href="#">Home Page</a></li>
            <li role="presentation"><a href="#">Categories</a></li>
            <li role="presentation"><a href="#">About Us</a></li>
            <li role="presentation" class="active"><a href="#">Services</a></li>
            <li role="presentation"><a href="#">Our Team</a></li>
            <li role="presentation"><a href="#">Lastest Work</a></li>
            <li role="presentation"><a href="#">Contact Us</a></li>
            <li role="presentation">
                <a href="#collapsedMenu" data-toggle="collapse" aria-expanded="false"
                   aria-controls="collapsedMenu">
                    Footer
                </a>
                <ul class="nav collapse" id="collapsedMenu">
                    <li role="presentation"><a href="#">Social Info Link</a></li>
                    <li role="presentation"><a href="#">Privacy Policy</a></li>
                    <li role="presentation"><a href="#">Terms and Conditions</a></li>
                </ul>

            </li>
        </ul>
    </div>
    <div class="col-lg-10 col-md-10">
        <div class="panel panel-default">
            <div class="panel-heading">
                Services List
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>IOS & OS X</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Android</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Full Stack Web Development</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">Create a new service</div>
            <div class="panel-body">
                <form>

                    <div class="input-group">
                        <span class="input-group-addon" id="describeActiveDate">Active Date</span>
                        <input class="activeDatePicker" data-date-format="mm/dd/yyyy"/>
                    </div>
                    <!-- <ul class="nav nav-tabs">
                         <li role="presentation" class="active">
                             <a href="#">English</a>
                             <div class="input-group">
                                 <span class="input-group-addon" id="describeTitle">Title</span>
                                 <input type="text" class="form-control" placeholder="Title"
                                        aria-describedby="describeTitle"/>
                             </div>
                             <div class="input-group">
                                 <span class="input-group-addon" id="describeContent">Content:</span>
                         <textarea class="form-control" placeholder="Content"
                                   aria-describedby="describeContent"></textarea>
                             </div>
                         </li>
                         <li role="presentation">
                             <a href="#">Vietnamese</a>

                         </li>
                     </ul>-->

                </form>
            </div>
        </div>
    </div>
</div>
<footer class="container-fluid text-center">
    Copyright@2014 By NLL Solution LLC
</footer>
<script>
    $(".activeDatePicker").datepicker();
</script>

</body>
</html>